<template>
  <div class="add-order">
    <div>
      <div
        style="
          font-size: 18px;
          color: #303133;
          padding-bottom: 20px;
          font-weight: bold;
        "
      >
        {{ formData.id ? "编辑订单" : "新增订单" }}
      </div>
      <div v-loading="loading">
        <el-form
          :model="formData"
          :disabled="formDataDisabled"
          size="small"
          label-width="130px"
          label-position="right"
          ref="formData"
        >
          <el-form-item label="订单的标题" prop="title">
            <el-input
              v-model="formData.title"
              placeholder="请输入订单的标题"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="服装类型" prop="gender">
            <el-select v-model="formData.gender" placeholder="请选择" clearable>
              <el-option :value="0" label="女装"></el-option>
              <el-option :value="1" label="男装"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服装面料" prop="material">
            <el-input
              v-model="formData.material"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="服装具体描述" prop="require">
            <el-input
              v-model="formData.require"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="设计师等级" prop="level">
            <el-input
              v-model="formData.level"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="服装的功能性描述" prop="functionality">
            <el-input
              v-model="formData.functionality"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="服装成本价" prop="cost">
            <el-input
              v-model="formData.cost"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="最小适配年龄" prop="minAge">
            <el-input-number v-model="formData.minAge"></el-input-number>
          </el-form-item>
          <el-form-item label="最大适配年龄" prop="maxAge">
            <el-input-number v-model="formData.maxAge"></el-input-number>
          </el-form-item>
          <el-form-item label="服装风格" prop="style">
            <el-input
              v-model="formData.style"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="服装类型" prop="types">
            <el-select v-model="formData.types" placeholder="请选择" clearable>
              <el-option
                v-for="(item, index) in typesOptions"
                :value="item.value"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订金" prop="deposit">
            <el-input-number v-model="formData.deposit"></el-input-number>
          </el-form-item>
          <el-form-item label="订单总金额" prop="amount">
            <el-input-number v-model="formData.amount"></el-input-number>
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="formData.status" placeholder="请选择" clearable>
              <el-option
                v-for="(item, index) in statusOptions"
                :value="item.value"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单创建时间" prop="createTime">
            <el-date-picker
              v-model="formData.createTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="订单截止日期" prop="deadline">
            <el-date-picker
              v-model="formData.deadline"
              type="datetime"
              placeholder="请填写截止日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="订单更新日期" prop="updateTime">
            <el-date-picker
              v-model="formData.updateTime"
              type="datetime"
              placeholder="请填写截止日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button size="small" v-if="!formDataDisabled" @click="submitForm">
            提交订单
          </el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addOrder, updateOrder } from "@/api/order"
export default {
  name: "AddOrder",
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    orderData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      loading: false,
      formDataDisabled: false,
      formData: {},
      typesOptions: [
        { value: 1, name: "内衬" },
        { value: 2, name: "上衣" },
        { value: 3, name: "外套" },
        { value: 4, name: "裤装" },
        { value: 5, name: "裙装" },
        { value: 6, name: "套装" },
      ],
      statusOptions: [
        { value: 1, name: "待处理" },
        { value: 2, name: "进行中" },
        { value: 3, name: "已完成" },
      ],
    }
  },
  mounted() {
    if (this.orderData) {
      this.formData = { ...this.orderData }
    }
  },
  watch: {
    orderData(val) {
      this.formData = { ...val }
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:open", false)
    },
    submitForm() {
      if (this.orderData) {
        updateOrder(this.formData)
          .then((res) => {
            this.$message.success(res)
            this.$emit("update:open", false)
            this.$emit("getlist")
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else {
        addOrder(this.formData)
          .then((res) => {
            this.$message.success(res)
            this.$emit("update:open", false)
            this.$emit("getlist")
          })
          .catch((err) => {
            this.$message.error(err)
          })
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
